<template>
  <div class="progress" :style="`width:${width}px;height:${height}px`">
    <svg viewBox="0 0 100 100" class="svg-circle-progress" :style="`width:${width}px;height:${height}px`">
      <circle r="40" cx="50" cy="50" fill="none" stroke-miterlimit="20" stroke-width="10" class="svg-progress"
        style="stroke-dasharray: 275, 279.602; stroke: #eee"></circle>
      <circle r="40" cx="50" cy="50" fill="none" stroke-miterlimit="20" stroke-width="10" class="svg-progress"
        :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"></circle>
    </svg>
    <div class="mask" :style="`color:${color}`">
      <span class="bigData"> {{ showProgress }} </span> %
    </div>
  </div>
</template>
<script setup lang="ts" name="circularProgress">
import { ref, toRefs, watch, onMounted, defineProps } from "vue";

const props = defineProps({
  targetValue: {
    type: Number,
    require: true,
    default: -1,
  },
  color: {
    type: String,
    default: "#3fe7c8",
  },
  width: {
    type: Number,
    default: 160,
  },
  height: {
    type: Number,
    default: 160,
  },
});
const { height, width, color, targetValue } = toRefs(props);

const showProgress = ref<number>(0);
console.log(targetValue.value)
const addData = () => {
  if (targetValue.value === 0) return;
  let timer: any = setInterval(() => {
    if (targetValue.value == showProgress.value) {
      clearInterval(timer);
      timer = null;
      return;
    }

    if (showProgress.value >= 100) {
      return
    }
    showProgress.value++;

  }, 15);
};
onMounted(() => {
  addData();
});
const progressValue = ref<number>((showProgress.value / 100) * 250);

watch(showProgress, (newValue: number) => {
  progressValue.value = (newValue / 100) * 250;
});
</script>
<style lang="less" scoped>
.progress {
  display: inline-block;
  position: relative;
  height: 100%;
  text-align: center;
}

.svg-circle-progress {
  position: relative;
  transform: rotate(-90deg);
}

.svg-progress {
  stroke: #3fe7c8;
  stroke-linecap: butt;
  transition: all 0.3s linear;
}

.mask {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);

  .bigData {
    font-size: 1.35em;
    font-weight: 500;
    margin-right: -5px;
  }
}
</style>